import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'

function useCd() {
  const imgRef = ref(null)
  const { state } = useStore()
  const playing = computed(() => {
    return state.play.playing
  })

  watch(playing, newPlaying => {
    const img = imgRef.value
    if (newPlaying) {
      img && (img.style.animationPlayState = 'running')
    } else {
      img && (img.style.animationPlayState = 'paused')
    }
  })

  return { imgRef }
}

export default useCd
